<template>
  <div class="cart">
      <div class="container">
    <el-table :data="tableData" border>
      <el-table-column  prop="createTime" label="商品图片" width="180">
        <template #default="scope">
       <a v-bind:href="'/#/goods/'+ scope.row.id"><img :src="scope.row.subImages"  alt="" style="width: 150px;height: 150px"></a>
      </template>
      </el-table-column>
    <el-table-column  prop="createTime" label="收藏日期" width="180"></el-table-column>
    <el-table-column prop="name"  label="商品名字"  width="180"></el-table-column>
     <el-table-column prop="price"  label="价钱"  width="180"></el-table-column>
    <el-table-column  prop="detail"  width="400" label="商品描述"></el-table-column>
    <el-table-column  prop="address"  width="160" label="操作"> 
     <template #default="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
          </el-table-column>
    </el-table>
      </div>
    <footer></footer>
  </div>
</template>
<script>
import Footer from '../components/Footer.vue'
import axios from 'axios'
  export default{
    name:'index',
    components:{
      Footer
    },
    data(){
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎111111111111111111111111111111111',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]

      }
    },
    created(){
      this.mycollection();
    },
    methods:{

      mycollection(){
         axios.get('/collection/mycollection').then(res=>{
           this.tableData = res
           console.log(res)
      }) 
      },
      handleDelete(index, rows){ 
      let id = rows.id
      console.log(id)
      axios.get('/collection/deleteId?id=' + id).then(res=>{
          this.$message.success(res);
          this.mycollection();
      });
       
      }
     
    }
  }
</script>
<style lang="scss">
  .cart{
    .container{
      position: relative;
        display: flex;
        justify-content: space-between;
        align-content: center;
        width: 1226px;
        margin-right:auto;
        margin-left:auto;
        display:flex;
    } 
  
  }
</style>